<template>
	<view>
		<view v-if="menuIndex == 0">
			<view class="Headprompt">默认本时区，如没需求无需选择</view>
			
			<view class="Classroomoptions">
				<view class="body-item">
					<text>我的班级</text>
					<view class="body-right" @tap="toChooseclass">
						<text v-if="gorupName==''">请选择班级</text>
						<text v-else>{{gorupName}}</text>
						<image src="../../../static/right.png" mode=""></image>
					</view>
				</view>
			</view>
			
			<view class="body-item" @tap="toLabel">
				<text>主题</text>
				<view class="body-right">
					<text v-if="Theme_item==''&&Theme_name==''">请选择</text>
					<text v-else>{{Theme_name}}/{{Theme_item}}</text>
					<image src="../../../static/right.png" mode=""></image>
				</view>
			</view>
			
			<view class="body-item">
				<view class="uni-title uni-common-pl">语言等级</view>			
				<view class="uni-list-cell-db ">
					<picker @change="tolanguelever" :value="langueindex" :range="languelever" class="body-right">
						<text class="uni-input">{{languelever[langueindex]}}</text>
						<image src="../../../static/right.png" mode=""></image>
					</picker>
				</view>
			</view>
			
			<view class="body-item">
				<text>课程封面</text>
				<view class="uploadImg" @tap="getToken('headImg')">
					<image v-if="userHeadImg==''" src="../../../static/index/zhaopian.png" mode=""></image>
					<image v-else :src="userHeadImg" mode=""></image>
				</view>
			</view>
			
			<view class="body-item">
				<text>选择时间</text>
				<view class="uni-list-cell-db ">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<text class="uni-input">{{date}}</text>
						<image src="../../../static/right.png" mode=""></image>
					</picker>
				</view>
			</view>
			
			<view class="timer_select">
				<view class="times_tabs">
					<view v-for="(item,index) in timeMenu" :key="index" @tap="SelectTimer(index)" :class="{active : timeMenuindex == index}" class="times_child">
						{{item.name}}
					</view>
				</view>		
				<view class="timer-content"  v-for="(specifictime,insqwe) in Thespecifictime" :key="insqwe">
					<view v-if="timeMenuindex == 0" class="timers_childs">
						<view v-for="(itme,index) in specifictime.Inthemorning" :key="index" class="tiems_info" :class="{active : sleectindex == itme}" @tap="SelectTime(itme)">{{itme}}</view>
					</view>
					<view v-if="timeMenuindex == 1" class="timers_childs">
						<view v-for="(itme,index) in specifictime.Inthemornings" :key="index" class="tiems_info" :class="{active : sleectindex == itme}" @tap="SelectTime(itme)">{{itme}}</view>
					</view>
					<view v-if="timeMenuindex == 2" class="timers_childs">
						<view v-for="(itme,index) in specifictime.Inthemorningss" :key="index" class="tiems_info" :class="{active : sleectindex == itme}" @tap="SelectTime(itme)">{{itme}}</view>
					</view>
					<view v-if="timeMenuindex == 3" class="timers_childs">
						<view v-for="(itme,index) in specifictime.Atnoon" :key="index" class="tiems_info" :class="{active : sleectindex == itme}" @tap="SelectTime(itme)">{{itme}}</view>
					</view>
					<view v-if="timeMenuindex == 4" class="timers_childs">
						<view v-for="(itme,index) in specifictime.Intheafternoon" :key="index" class="tiems_info" :class="{active : sleectindex == itme}" @tap="SelectTime(itme)">{{itme}}</view>
					</view>
					<view v-if="timeMenuindex == 5" class="timers_childs">
						<view v-for="(itme,index) in specifictime.evening" :key="index" class="tiems_info" :class="{active : sleectindex == itme}" @tap="SelectTime(itme)">{{itme}}</view>
					</view>
					<view class="creatClass_room" @tap="curriculum">确定</view>
				</view>
			</view>
			
		</view>
		<!-- <view v-else-if="menuIndex == 1"></view> -->
	</view>
</template>

<script>
	import wh from '../../../wxcomponents/mlvb-live-room/webim_handler.js'
	import qiniu from '../../../common/qiniuUploader.js'
	export default {
		data() {
			const currentDate = this.getDate({
			    format: true
			})
			return {
				menuIndex:'',
				gorupName:'',
				Theme_item:'',
				Theme_name:'',
				languelever:['零基础','初级','中级','高级'],
				langueindex:'',
				languelevers:'',
				userHeadImg: '',
				timeMenu:[
					{name:'凌晨',enname:'Inthemorning'},
					{name:'早上',enname:'Inthemornings'},
					{name:'上午',enname:'Inthemorningss'},
					{name:'中文',enname:'Atnoon'},
					{name:'下午',enname:'Intheafternoon'},
					{name:'晚上',enname:'evening'},
				],
				Thespecifictime:[{
					Inthemorning: ['00:00-00:30','00:30-01:00','01:00-01:30','01:30-02:00','02:00-02:30','02:30-03:00','03:00-03:30','03:30-04:00','04:00-04:30','04:30-05:00','05:00-05:30','05:30-06:00']
				},{
					Inthemornings:['06:00-06:30','06:30-07:00','07:00-07:30','07:30-08:00']
				},{
					Inthemorningss:['08:00-08:30','08:30-09:00','09:00-09:30','09:30-10:00','10:00-10:30','10:30-11:00','11:00-11:30','11:30-12:00']	
				},{
					Atnoon:['12:00-12:30','12:30:13:00','13:00-13:30','13:30-14:00']
				},{
					Intheafternoon:['14:00-14:30','14:30-15:00','15:00-15:30','15:30-16:00','16:00-16:30','16:30-17:00','17:00-17:30','17:30-18:00']	
				},{
					evening:['18:00-18:30','18:30-19:00','19:00-19:30','19:30-20:00','20:00-20:30','20:30-21:00','21:00-21:30','21:30-22:00','22:00-22:30','22:30-23:00','23:00-23:30','23:30-24:00']
				}],
				timeMenuindex:'0',
				sleectindex:'',
				date: currentDate,
				token:''
			}
		},
		computed: {
		    startDate() {
				return this.getDate('start');
		    },
		    endDate() {
		        return this.getDate('end');
		    }
		    },
		onShow() {
			this.menuIndex = uni.getStorageSync('menuIndex')//获取当前是创建课堂还是讨论组
			if(uni.getStorageSync('ClassName') != undefined || uni.getStorageSync('ClassName') != ''){
				this.gorupName = uni.getStorageSync('ClassName');
			}		
			if (uni.getStorageSync('Theme_name') != undefined || uni.getStorageSync('Theme_name') != '') {
				this.Theme_name = uni.getStorageSync('Theme_name')
			}
			if (uni.getStorageSync('Theme_item') != undefined || uni.getStorageSync('Theme_item') != '') {
				this.Theme_item = uni.getStorageSync('Theme_item')
			}
			if(this.menuIndex == 1){
				uni.navigateTo({
					url:'/pages/World/Createstudio/Createstudio'
				})
			}
		},
		onLoad(options) {
			this.option = options
			this.name = options.Navigationtitle
			uni.setNavigationBarTitle({//动态去设置导航标题
				title:this.name
			})
			this.Determinethetime()
		},
		methods: {
			toChooseclass(){//去选择或者创建班级
				uni.navigateTo({
					url: '/pages/Other/Chooseclass/Chooseclass'
				})
			},
			toLabel() {//选择主题
				uni.navigateTo({
					url: '../../../pages/My/selectClassTheme/selectClassTheme'
				})
			},
			tolanguelever:function (e) {//选择语言等级
				this.langueindex = e.target.value
				if(this.langueindex == 0){
					this.languelevers = "Zero basis"
				}else if(this.langueindex == 1){
					this.languelevers = "Primary"
				}else if(this.langueindex == 2){
					this.languelevers = "Intermediate"
				}else if(this.langueindex == 3){
					this.languelevers = "Senior"
				}
			},
			getToken() {//上传头像
				var me = this;
				var data = {
					key: null,
				}
				this.myAjaxNewPost({
					model: 'push',
					controllerName: 'upload',
					actionName: 'getToken',
					data: data,
					successBack: function(res) {			
						me.token = res.data.data
						console.log(me.token)
						if (me.token != '') {
							me.selectImg()
						}			
					}
				})
			},
			selectImg() { //上传头像
				var me = this;
				uni.showActionSheet({
					itemList: ['拍照', '相册'],
					itemColor: '#008AFF',
					success: function(res) {
						var index = res.tapIndex;
						if (index == 1) {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['album'], //从相册选择
								success: function(res) {
									console.log(res)
									var filePath = res.tempFilePaths[0];
									// console.log(JSON.stringify(res.tempFilePaths));
									// 交给七牛上传
									if (me.token != '') {
										uni.showLoading({
											title: '上传中'
										})
										qiniu.upload(filePath, (res) => {
											console.log(res.imageURL)
											var imageURL = res.imageURL
											me.userHeadImg = imageURL
											uni.hideLoading()
											console.log('file url is: ' + res.fileUrl);
										}, (error) => {
											uni.showToast({
												title: '上传失败',
												icon: null
											});
											console.log('error: ' + error);
										}, {
											region: 'ECN',
											domain: 'http://img.curiousmore.com', // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接
											key: uni.getStorageSync('user_id')+'groupHead'+me.generateMixed(8) , // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
											// 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
											uptoken: me.token, // 由其他程序生成七牛 uptoken
											// uptokenURL: 'http://192.168.6.6:8768/eg-api/push/upload/getToken', // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "[yourTokenString]"}
											uptokenFunc: function() {
												return '[yourTokenString]';
											}
										}, (res) => {
											console.log('上传进度', res.progress)
											console.log('已经上传的数据长度', res.totalBytesSent)
											console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
			
										}, () => {
											// 取消上传
										}, () => {
											// `before` 上传前执行的操作
										}, (err) => {
											// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
			
										});
									}
			
								}
							});
						} else if (index == 0) {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '], //相机
								success: function(res) {
									// console.log(JSON.stringify(res.tempFilePaths));
									var filePath = res.tempFilePaths[0];
									// console.log(JSON.stringify(res.tempFilePaths));
									// 交给七牛上传
									if (me.token != '') {
										uni.showLoading({
											title: '上传中'
										})
										qiniu.upload(filePath, (res) => {
											console.log(res.imageURL)
											var imageURL = res.imageURL
											me.userHeadImg = imageURL
											uni.hideLoading()
											console.log('file url is: ' + res.fileUrl);
										}, (error) => {
											uni.showToast({
												title: '上传失败',
												icon: null
											});
											console.log('error: ' + error);
										}, {
											region: 'ECN',
											domain: 'http://img.curiousmore.com', // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接
											key: uni.getStorageSync('user_id')+'groupHead'+me.generateMixed(8), // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
											// 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
											uptoken: me.token, // 由其他程序生成七牛 uptoken
											// uptokenURL: 'http://192.168.6.6:8768/eg-api/push/upload/getToken', // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "[yourTokenString]"}
											uptokenFunc: function() {
												return '[yourTokenString]';
											}
										}, (res) => {
											console.log('上传进度', res.progress)
											console.log('已经上传的数据长度', res.totalBytesSent)
											console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
										}, () => {
											// 取消上传
										}, () => {
											// `before` 上传前执行的操作
										}, (err) => {
											// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
			
										});
									}
								}
							});
						}
					}
				});
			},
			generateMixed(n) {
				var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
					'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g',
					'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'
				];
				var res = "";
				for (var i = 0; i < n; i++) {
					var id = Math.ceil(Math.random() * 17);
					res += chars[id];
				}
				return res;
			},
			SelectTimer(index){
				this.timeMenuindex = index
			},
			bindDateChange: function(e) {//时间选择
			    this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();					
				if (type === 'start') {
					year = year;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			Determinethetime(){//获取当前时间与预约时间进行对比
				var newDate = new Date();
				var mytime=newDate.toLocaleTimeString();
				console.log('当前的时间是：',mytime)
			},
			SelectTime(e){
				this.sleectindex = e
				console.log(this.sleectindex)
			},
			curriculum(){//课程安排确定事件
				var _this = this
				var Starttoend = _this.sleectindex.split("-");
				var starTtime = Starttoend[0]
				var endoftime = Starttoend[1]
				let yy = new Date().getFullYear();
				let mm = new Date().getMonth()+1;
				let dd = new Date().getDate();
				let hh = new Date().getHours();
				let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
				let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
				let gettime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf;
				console.log('开始结束时间22为',gettime)
				if(_this.gorupName == ''){//判断班级是否为空
					uni.showToast({
						title: '请选择班级',
						icon: 'none'
					})
					return
				}
				if(_this.Theme_name == '' && _this.Theme_item == ''){//判断主题是否为空
					uni.showToast({
						title: '请选择主题',
						icon: 'none'
					})
					return
				}
				if(_this.langueindex == ''){//判断语言等级是否为空
					uni.showToast({
						title:'请选择语言等级',
						icon:'none'
					})
				}
				if(_this.userHeadImg == ''){//判断封面是否上传
					uni.showToast({
						title:'请上传封面',
						icon:'none'
					})
				}
				if(_this.starTtime == ''){//判断上课时间是否为空
					uni.showToast({
						title:'请选择上课时间',
						icon:'none'
					})
				}
				var entities = [
					{age_grade:uni.getStorageSync('age_grade')},
					{cover :_this.userHeadImg},
					{create_time:gettime},	
					{end_time:endoftime},
					{group_id:uni.getStorageSync('ClassId')},
					{group_type:uni.getStorageSync('group_type')},
					{language:uni.getStorageSync('CreatLanguage')},
					{language_level:_this.languelevers},
					{teach_language:uni.getStorageSync('CreatLanguage')},
					{master_id:uni.getStorageSync('user_id')},
					{offset:'0'},
					{itle:_this.gorupName},
					{start_time:starTtime}
				]
				var entitiess= JSON.stringify(entities)
				// entitiess.replace(/\[|]/g,'')
				// console.info(entitiess.replace(/\[|]/g,''))
				console.info(typeof entitiess)
				var data = {					
					age_grade:uni.getStorageSync('age_grade'),
					cover :_this.userHeadImg,
					create_time:gettime,
					end_time:endoftime,
					group_id:JSON.parse(uni.getStorageSync('ClassId')),
					group_type:uni.getStorageSync('group_type'),
					id:uni.getStorageSync('TheID'),
					language:uni.getStorageSync('CreatLanguage'),
					language_level:_this.languelevers,
					master_id:uni.getStorageSync('user_id'),
					offset:'0',
					teach_language:uni.getStorageSync('CreatLanguage'),
					start_time:starTtime,
					status:1,
					title:_this.gorupName,
					entities:entitiess,
				}
				console.log(data)
				this.myAjaxNewPost({
					model: 'user',
					controllerName: 'masterAppointment',
					actionName: 'insert',
					data: data,
					successBack: function(res) {			
						console.log(res)
							
					}
				})
			}
		}
	}
</script>

<style scoped>
	.Headprompt{
		display: flex;
		width: 100%;
		height: 80upx;
		background: #696969;
		justify-content: center;
		align-items: center;
		font-size: 30upx;
	}
	/*创建详情样式*/
	.Classroomoptions{
		position: relative;
		width: 100%;
		height: auto;
	}
	.body-item {
		background: #FFFFFF;
		padding: 0 24upx;
		border-bottom: 1upx solid #E6E6E6;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88upx;
		font-size: 32upx;
	}
	
	.body-item image {
		width: 16upx;
		height: 28upx;
		margin-left: 30upx;
	}
	.body-item .uploadImg image{
		width: 70upx;
		height: 70upx;
		border-radius: 50%;
	}
	.body-right {
		font-size: 28upx;
		color: #999999;
		/* font-weight: 100; */
	}
	/*时间选项卡*/
	.timer_select{
		display: flex;
		display: block;
		width: 100%;
		background: #FFFFFF;
	}
	.active{
		color: #32CCCC;
	}
	.times_tabs{
		display: flex;
		flex-direction: row;
		margin: 10px;
	}
	.times_child{
		flex: 1;
		align-items: center;
		justify-content: center;
	}
	/* .times_child:last-child{
		margin-left: auto;
	} */
	.timer-content{
		display: flex;
		width: 100%;
		align-items: center;
	}
	.timers_childs{
		display: flex;
		width: 100%;
		flex-wrap: wrap;
	}
	.tiems_info{
		display: flex;
		width: 230upx;
		height: 60upx;
		font-size: 26upx;
		align-items: center;
		justify-content: center;
		border: 1px solid #E4E4E4;
		border-radius: 20upx;
		margin: 9upx;
		/* padding: 10upx; */
	}
	.creatClass_room{
		display: flex;
		width: 90%;
		height: 60upx;
		align-items: center;
		justify-content: center;
		background:#00BFFF;
		position: absolute;
		left: 5%;
		border-radius: 20upx;
		bottom: 20upx;
	}
</style>
